<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 测试数据
      const inputData = [
        {
          startValue: 10,
          endValue: 0,
          color: "rgba(255,0,0,.5)",
        },
        {
          startValue: 20,
          endValue: 11,
          color: "rgba(255,255,0,.5)",
        },
        {
          startValue: 30,
          endValue: 21,
          color: "rgba(0,0,211,.5)",
        },
      ];

      const normalData = [
        {
          value: 0,
          color: "rgba(255,0,0,.5)",
        },
        {
          value: 11,
          color: "rgba(255,255,0,.5)",
        },
        {
          value: 21,
          color: "rgba(0,0,211,.5)",
        },
      ];

      function convertData(data) {
        const endValue = "endValue";
        return data.map((item) => ({
          value: item[endValue],
          color: item.color,
        }));
      }

      function convertIntervalData(data, sourceData) {
        const endValue = "endValue";
        return data.map((item,itemIdx) => ({
          color: item.color,
          startValue: sourceData[itemIdx].startValue,
          endValue: item.value,
        }));
      }

      // 转换数据格式
      //   const outputData = convertData(inputData);
      //   console.log(outputData);
      const sourceData = convertIntervalData(normalData, inputData);
      console.log(sourceData);
    </script>
  </body>
</html>
